<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <c:set var="contextPath" value="${pageContext.request.contextPath}"/>
    <title>案件详情</title>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="${contextPath}/resources/city/css/public-style.css"/>
    <link rel="stylesheet" type="text/css" href="${contextPath}/resources/city/css/caseDetails.css"/>
    <link rel="stylesheet" type="text/css" href="${contextPath}/resources/city/css/public-common.css"/>
    <link rel="stylesheet" type="text/css" href="${contextPath}/resources/city/css/flickerplate.css"/>
</head>
<body>
<!-- 内容 -->
<div id="main">
    <!-- 头部 -->
    <header>
        <img src="${contextPath}/resources/city/image/return.png" id="fanHui"/>
        <span id="tilte">案件详情</span>
    </header>

    <!-- 导航 -->
    <div class="nav bg">
        <div class="act navItem">案件详情</div>
        <div class="navItem">案件留言</div>
        <c:if test="${not empty sessionScope.employee}">
            <c:if test="${not info.status.finish and not info.status.cancelled}">
                <div class="toggleMenu">案件处理</div>
            </c:if>
        </c:if>
        <c:if test="${info.status.finish or info.status.cancelled}">
            <div class="navItem">处置结果</div>
        </c:if>
    </div>

    <!-- 内容 -->
    <div class="content content_1" style="display: block">
        <div class="caseImg bg">
            <div class="title">问题图片</div>
            <div class="cycle_img">
                <div class="flicker-example" data-block-text="false">
                    <ul>
                        <c:forEach items="${info.imageList}" var="image">
                            <li data-background="${image.url}"></li>
                        </c:forEach>
                    </ul>
                </div>
            </div>
        </div>

        <c:if test="${not empty info.categoryDto.name}">
            <div class="place bg">
                <div class="title">案件类别</div>
                <div class="describe">
                        ${info.categoryDto.name}
                </div>
            </div>
        </c:if>

        <div class="place bg">
            <div class="title">问题及位置描述</div>
            <div class="describe">
                ${info.addressDescription}
            </div>
        </div>
        <c:if test="${not empty info.phone}">
            <div class="contact bg">
                <div class="title">移动电话</div>
                <div class="describe">
                    +86 ${info.phone}
                </div>
            </div>
        </c:if>

        <div class="geography bg">
            <div class="title">定位地址</div>
            <div class="describe" id="describe" style="height: 350px;">

            </div>
        </div>
    </div>

    <!-- 内容 -->
    <div class="content content_2">
        <c:forEach items="${info.commentList}" var="comment">
            <div class="info ${empty comment.memberUuid?"my":""}">
                <p>${comment.createDateTime}</p>

                <div class="news">
                    <c:if test="${not empty comment.memberUuid}">
                        <div class="portrait"><img src="${comment.memberDto.headimgurl}"/></div>
                    </c:if>
                    <div class="message bg">
                        <div class="bg"></div>
                        <c:if test="${not comment.disable}">
                            ${comment.content}
                        </c:if>
                        <c:if test="${comment.disable}">
                            <span style="color:red;">该留言已被屏蔽</span>
                        </c:if>
                    </div>
                    <c:if test="${empty comment.memberUuid}">
                        <div class="portrait"><img src="${contextPath}/resources/images/is-user.png"/></div>
                    </c:if>
                </div>
            </div>
        </c:forEach>
        <c:if test="${empty info.commentList}">
            <div class="unCase">无留言</div>
        </c:if>

        <c:if test="${not info.status.finish and not info.status.cancelled}">
            <div class="reply">
                留言
            </div>

            <form id="commentForm">
                <input type="hidden" name="caseUuid" value="${info.uuid}">

                <div class="submit">
                    <div class="entry">
                        留言
                        <div class="close"><img src="${contextPath}/resources/city/image/X.png"/></div>
                        <textarea name="content" required="required" placeholder="请填写留言内容"></textarea>
                    </div>
                    <div class="tj">提交</div>
                </div>
            </form>
        </c:if>
    </div>

    <!-- 内容 -->
    <div class="content content_3">
        <div class="caseImg bg">
            <c:if test="${info.status.finish}">
                <div class="title">案件已处理完成,案件处置后图片:</div>
                <div class="cycle_img">
                    <div class="flicker" data-block-text="false">
                        <ul>
                            <c:forEach items="${info.completeImageList}" var="image">
                                <li data-background="${image.url}"></li>
                            </c:forEach>
                        </ul>
                    </div>
                </div>
            </c:if>
            <c:if test="${info.status.cancelled}">
                <div class="title">案件已被作废,作废原因如下:</div>
                <div class="cycle_img">
                        ${info.cancelContent}
                </div>
            </c:if>
        </div>
    </div>
</div>
<c:if test="${not empty sessionScope.employee}">
    <c:if test="${not info.status.finish or not info.status.cancelled}">
        <div class="ul Menu">
            <shiro:hasPermission name="CMC_FINISH:*">
                <div class="li"><a href="finish?uuid=${info.uuid}">完成案件</a></div>
            </shiro:hasPermission>
            <shiro:hasPermission name="CMC_REPORT:*">
                <c:if test="${info.disableStatus.report}">
                    <div class="li"><a href="report?uuid=${info.uuid}">上报案件</a></div>
                </c:if>
            </shiro:hasPermission>
            <shiro:hasPermission name="CMC_CANCEL:*">
                <div class="li"><a href="cancel?uuid=${info.uuid}">作废案件</a></div>
            </shiro:hasPermission>
            <shiro:hasPermission name="CMC_ASSIGNMENT:*">
                <c:if test="${sessionScope.employee.leader}">
                    <div class="li"><a href="assignment?caseUuid=${info.uuid}">分派案件</a></div>
                </c:if>
            </shiro:hasPermission>
            <div class="arrow"></div>
        </div>
    </c:if>
</c:if>

<script src="${contextPath}/resources/city/js/remJs.js"></script>
<script src="${contextPath}/resources/city/js/jquery-1.8.0.min.js"></script>
<script src="${contextPath}/resources/city/js/modernizr-custom-v2.7.1.min.js" type="text/javascript"></script>
<script src="${contextPath}/resources/city/js/jquery-finger-v0.1.0.min.js" type="text/javascript"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=h0EKj4yWH81COWhXGS4G7uyi" type="text/javascript"></script>
<script src="${contextPath}/resources/city/js/flickerplate.min.js" type="text/javascript"></script>
<script>
    var map = new BMap.Map("describe");
    var point = new BMap.Point('${info.locationX}', '${info.locationY}');
    map.centerAndZoom(point, 16);
    map.addOverlay(new BMap.Marker(point));

    $(function () {
        $('.flicker-example').flicker();
        $('.flicker').flicker();

        $("#fanHui").click(function () {
            window.location.href = "list.htm";
        });

        $('.navItem').click(function () {
            var idx = $(this).index() + 1;
            $('.nav .act').removeClass('act');
            $(this).addClass('act');
            $('#tilte').html($(this).html());

            $('.content').hide();
            $('.content_' + idx).show();
        });

        $(".toggleMenu").click(function () {
            $(".Menu").toggle();
        });

        $(".reply").click(function () {
            $(this).hide();
            $(".submit").show();
        });

        $(".tj").click(function () {
            var serialize = $("#commentForm").serialize();
            $.ajax({
                url: 'comment',
                data: serialize,
                type: 'post',
                cache: false,
                success: function (data) {
                    if (data.state) {
                        //克隆并生成新的
                        createComment(data);
                        //隐藏留言div
                        showCommentBtn();
                        $(".submit textarea").val('');
                    } else {
                        $(".submit textarea").addClass("error");
                    }
                },
                error: function () {
                    alert("留言失败,请重试!");
                }
            });
        });

        $(".close").click(showCommentBtn);

        function showCommentBtn() {
            $(".submit").hide();
            $(".reply").show();
        }

        //生成新的留言
        //1,留言为member创建
        //2,留言为社区管理员创建
        function createComment(data) {
            //1,清除"无留言"提示元素
            $(".unCase").remove();
            var template = "<div class='info #my'>" +
                    "<p>#time</p>" +
                    "<div class='news'>" +
                    "<div class='message bg'>" +
                    "<div class='bg'>" +
                    "</div>#content</div>" +
                    "</div>" +
                    "</div>";
            var photoTemplate = "<div class='portrait'>" +
                    "<img src='#headerImage'></div>";
            var comment = template.replace("#my", data.member ? "" : "my")
                    .replace("#time", data.createDateTime)
                    .replace("#content", data.content);
            var $comment = $(comment);
            //如果是member,则头像插入在内容之前
            //如果是employee,则头像插入在内容之后
            if (data.member) {
                var headerImage = photoTemplate.replace("#headerImage", data.headimgurl);
                $comment.find(".message").before($(headerImage));
            } else {
                //默认图片
                var headerImage = photoTemplate.replace("#headerImage", "${contextPath}/resources/images/is-user.png");
                $comment.find(".message").after($(headerImage));
            }

            $(".content_2").prepend($comment);
        }
    });
</script>

</body>
</html>
